<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>https://codepen.io/ispal/pen/LxjgEj</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body translate="no">
<h1>Css3 Transform</h1>
<!-- Rotate-->
<div class="card">
    <div class="box rotate">
        <div class="fill"></div>
    </div>
    <p>rotate(45deg)  </p>
</div>
<div class="card">
    <div class="box rotateX">
        <div class="fill"></div>
    </div>
    <p>rotateX(45deg)</p>
</div>
<div class="card">
    <div class="box rotateY">
        <div class="fill"></div>
    </div>
    <p>rotateY(45deg)</p>
</div>
<div class="card">
    <div class="box rotateZ">
        <div class="fill"></div>
    </div>
    <p>rotateZ(45deg)  </p>
</div>
<!-- scale-->
<div class="card">
    <div class="box scale">
        <div class="fill"></div>
    </div>
    <p>scale(2)</p>
</div>
<div class="card">
    <div class="box scaleX">
        <div class="fill"></div>
    </div>
    <p>scaleX(2)    </p>
</div>
<div class="card">
    <div class="box scaleY">
        <div class="fill"></div>
    </div>
    <p>scaleY(2)    </p>
</div>
<!-- skew-->
<div class="card">
    <div class="box skew">
        <div class="fill"></div>
    </div>
    <p>skew(45deg, 45deg)  </p>
</div>
<div class="card">
    <div class="box skewX">
        <div class="fill"></div>
    </div>
    <p>skewX(45deg)</p>
</div>
<div class="card">
    <div class="box skewY">
        <div class="fill"></div>
    </div>
    <p>skewY(45deg)</p>
</div>
<!-- translate-->
<div class="card">
    <div class="box translate">
        <div class="fill"></div>
    </div>
    <p>translate(45px)  </p>
</div>
<div class="card">
    <div class="box translateX">
        <div class="fill"></div>
    </div>
    <p>translateX(45px)</p>
</div>
<div class="card">
    <div class="box translateY">
        <div class="fill"></div>
    </div>
    <p>translateY(45px)</p>
</div>
<div class="card">
    <div class="box matrix">
        <div class="fill"></div>
    </div>
    <p> matrix(2, 2, 0, 2, 45, 0)</p>
</div>
<h4>Perspective : 100</h4>
<div class="perspective-100">
    <div class="card">
        <div class="box rotateX">
            <div class="fill"></div>
        </div>
        <p>rotateX(90deg)</p>
    </div>
    <div class="card">
        <div class="box rotateY">
            <div class="fill"></div>
        </div>
        <p>rotateY(45deg)</p>
    </div>
</div>
<h4>Perspective : 200</h4>
<div class="perspective-200">
    <div class="card">
        <div class="box rotateX">
            <div class="fill"></div>
        </div>
        <p>rotateX(90deg)</p>
    </div>
    <div class="card">
        <div class="box rotateY">
            <div class="fill"></div>
        </div>
        <p>rotateY(45deg)</p>
    </div>
</div>
<!-- transform origin-->
<h2>Transform origin</h2>
<div class="card">
    <div class="box rotate">
        <div class="fill to-100-0-0"></div>
    </div>
    <p>transform-origin : 100% 0 0  <br>rotate(45deg)</p>
</div>
<div class="card">
    <div class="box rotate">
        <div class="fill to-0-100-0"></div>
    </div>
    <p>transform-origin : 0 100%  0<br>rotate(45deg)</p>
</div>
<div class="card perspective-200">
    <div class="box rotateX">
        <div class="fill to-0-100-0"></div>
    </div>
    <p>transform-origin : 0 100%  0<br>rotateX(45deg)</p>
</div>
<div class="card perspective-200">
    <div class="box rotateX">
        <div class="fill to-100-0-0"></div>
    </div>
    <p>transform-origin : 0 100%  0<br>rotateX(45deg)</p>
</div>
<div class="card perspective-200">
    <div class="box rotateY">
        <div class="fill to-0-100-0"></div>
    </div>
    <p>transform-origin : 0 100%  0 <br>rotateY(45deg)</p>
</div>
<div class="card perspective-200">
    <div class="box rotateY">
        <div class="fill to-100-0-0"></div>
    </div>
    <p>transform-origin : 100%  0 0<br>rotateY(45deg)</p>
</div>
<div class="card">
    <div class="box scale">
        <div class="fill to-100-0-0"></div>
    </div>
    <p>transform-origin : 100%  0 0<br>scale(2)</p>
</div>
<div class="card">
    <div class="box scale">
        <div class="fill to-0-100-0"></div>
    </div>
    <p>transform-origin : 0 100%  0<br>scale(2)</p>
</div>
<div class="card">
    <div class="box scaleX">
        <div class="fill to-100-0-0"></div>
    </div>
    <p>transform-origin : 100%  0 0<br>scaleX(2)</p>
</div>
<div class="card">
    <div class="box scaleX">
        <div class="fill to-0-100-0"></div>
    </div>
    <p>transform-origin : 0 100%  0<br>scaleX(2)</p>
</div>
<div class="card">
    <div class="box scaleY">
        <div class="fill to-100-0-0"></div>
    </div>
    <p>transform-origin : 100%  0 0<br>scaleY(2)</p>
</div>
<div class="card">
    <div class="box scaleY">
        <div class="fill to-0-100-0"></div>
    </div>
    <p>transform-origin : 0 100%  0<br>scaleY(2)</p>
</div>






</body>
<script src="script.js"></script>
</html>